// ignore_for_file: file_names, must_be_immutable

import 'package:flutter/material.dart';

class MyApp13 extends StatelessWidget {
  MyApp13({super.key});
  //提供数据
  Map orderInfo = {
    "createTime": "2024-08-15 21:49:48",
    "orderState": 2,
    "image":
        "https://yanxuan-item.nosdn.127.net/a09de222ed32efa8ffe359b1d5780574.jpg",
    "name": "茶水分离杯耐热隔热玻璃杯茶水分离杯耐热隔热玻璃杯茶水分离杯耐热隔热玻璃杯茶水分离杯耐热隔热玻璃杯",
    "totalNum": 2,
    "curPrice": 119.5,
    "totalMoney": 119.5,
    "attrsText": "规格:白色240ml"
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        //1.导航
        appBar: AppBar(
          title: const Text('ListView组件'),
          backgroundColor: Colors.pink,
        ),
        //2.内容
        body: ListView.separated(
            itemBuilder: (BuildContext context, int index) {
              return Container(
                  width: double.infinity,
                  height: 250,
                  padding: EdgeInsets.all(10),
                  color: Color.fromARGB(255, 224, 224, 224),
                  child: Column(
                    children: [
                      //1.2.1第一层
                      Row(
                        children: [
                          Text(orderInfo['createTime']),
                          Spacer(),
                          Text(
                            orderInfo['orderState'] == 2 ? '待发货' : '待支付',
                            style: TextStyle(
                                color: orderInfo['orderState'] == 2
                                    ? Colors.yellow
                                    : Colors.red),
                          )
                        ],
                      ),
                      //1.2.2第二层
                      Padding(
                          padding: EdgeInsets.only(top: 10),
                          child: Row(
                            //侧轴方向起始位置对齐
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              //左侧
                              Image(
                                width: 100,
                                height: 100,
                                image: NetworkImage(orderInfo['image']),
                              ),
                              //右侧
                              Expanded(
                                child: Padding(
                                  padding: EdgeInsets.only(left: 10),
                                  child: Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: [
                                        //商品名称加数量
                                        Row(
                                          children: [
                                            Expanded(
                                              child: Text(orderInfo['name']),
                                            ),
                                            Text('x2')
                                          ],
                                        ),
                                        SizedBox(height: 10),
                                        //规格
                                        Padding(
                                          padding: EdgeInsets.only(top: 5),
                                          child: Container(
                                            padding: EdgeInsets.all(5),
                                            decoration: BoxDecoration(
                                              color: Colors.white,
                                              borderRadius:
                                                  BorderRadius.circular(5),
                                            ),
                                            child: Text(
                                              orderInfo['attrsText'],
                                              maxLines: 1,
                                              style: TextStyle(
                                                  fontSize: 12,
                                                  color: Colors.red),
                                            ),
                                          ),
                                        ),
                                        //价格
                                        Padding(
                                          padding: EdgeInsets.only(top: 5),
                                          child:
                                              Text('￥${orderInfo['curPrice']}'),
                                        )
                                      ]),
                                ),
                              ),
                            ],
                          )),

                      //1.2.3第三层
                      //合计，右对齐
                      Padding(
                        padding: EdgeInsets.only(top: 10),
                        child: Row(
                          children: [
                            Spacer(),
                            const Text('合计：'),
                            Text('￥${orderInfo['totalMoney']}'),
                          ],
                        ),
                      ),
                      //1.2.4第四层
                      //两个按钮 确认收货和取消订单
                      Padding(
                          padding: EdgeInsets.only(top: 10),
                          child: Row(children: [
                            Spacer(),
                            ElevatedButton(
                              onPressed: () {},
                              style: ElevatedButton.styleFrom(
                                  backgroundColor: Colors.red),
                              child: Text(
                                '确认收货',
                                style: TextStyle(
                                    fontSize: 16, color: Colors.white),
                              ),
                            ),
                            SizedBox(
                              width: 10,
                            ),
                            ElevatedButton(
                              onPressed: () {},
                              style: ElevatedButton.styleFrom(
                                  backgroundColor:
                                      Color.fromARGB(255, 148, 241, 234)),
                              child: Text(
                                '取消订单',
                                style: TextStyle(
                                    fontSize: 16, color: Colors.white),
                              ),
                            ),
                          ]))
                    ],
                  ));
            },
            separatorBuilder: (BuildContext context, int index) {
              // return Divider(
              //   color: Colors.black,
              // );
              return Container(
                // margin: EdgeInsets.only(left: 10, right: 10),
                width: double.infinity,
                height: 10,
                color: Color.fromARGB(255, 236, 231, 231),
              );
            },
            itemCount: 20)
        //
        );
  }
}
